/* eslint-disable consistent-return */
/* eslint-disable array-callback-return */
import React, { Component } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Row,
  Col,
  Spin,
  Select,
  Input,
  Table,
  message,
  Popconfirm,
  Cascader,
} from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import { isRepeat } from '@/utils/utils';
import styles from '@/utils/utils.less';
import Customer from '../../components/Customer';
import Area from '../../components/Area';
import DictCode from '../../components/DictCode';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

@connect(({ serviceconfig, publicdata, loading }) => ({
  serviceconfig,
  detList: serviceconfig.detList, // 服务配置列表
  areaConfigId: serviceconfig.areaConfigId, // 地区配置id
  tableId: serviceconfig.tableId, // 表格行标识
  dictCode: publicdata.dictCode,
  submitLoading: loading.models.serviceconfig,
}))
@Form.create()
class ServiceConfig extends Component {
  constructor(props) {
    super(props);
    this.state = { custConfId: null, isdisbaled: false };
  }

  componentDidMount() {
    const {
      dispatch,
      location: { query },
    } = this.props;
    const { custConfId } = query;
    if (custConfId) {
      this.setState({
        isdisbaled: true,
      });
    } else {
      this.setState({
        isdisbaled: false,
      });
    }
    // 获取字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['BIZ_INS_TYPE', 'BIZ_ACCU_TYPE', 'PAY_FEES_WAY'],
    }).then(dictData => {
      if (dictData) {
        const insMergekindList = [{ itemCode: '1', itemName: '社保' }, ...dictData.BIZ_ACCU_TYPE];
        const insNotMergekindList = [...dictData.BIZ_INS_TYPE, ...dictData.BIZ_ACCU_TYPE];
        dispatch({
          type: 'serviceconfig/updateModelData',
          payload: {
            payWayList: dictData.PAY_FEES_WAY,
            insMergekindList,
            insNotMergekindList,
          },
        });
      }
    });
    if (custConfId) {
      // 修改
      this.setState({ custConfId });
      dispatch({
        type: 'serviceconfig/fetchUpdateInfo',
        payload: { custConfId },
      }).then(response => {
        if (response) {
          dispatch({
            type: 'publicdata/updateModelData',
            payload: {
              custList: [
                {
                  custId: response.data && response.data.custId,
                  name: response.data && response.data.custName,
                },
              ],
            },
          });
          dispatch({
            type: 'publicdata/updateModelData',
            payload: {
              custFsValue: {
                key: response.data && response.data.custId,
                label: response.data && response.data.custName,
              },
            },
          });
          if (response.data.detList && response.data.detList.length) {
            response.data.detList.map(item => {
              if (item.confDetList && item.confDetList.length) {
                item.confDetList.map(c => {
                  const temp = c;
                  let insKinds = [];
                  if (c.kind !== '2' && c.kind !== '1') {
                    insKinds.push(c.kind);
                  } else if (c.kind === '1') {
                    insKinds = ['3', '4', '5', '6', '7'];
                  }
                  if (!c.injSecAccoId) {
                    this.getAcountList(item.id, c.payWay, insKinds, item.id, c.key, data => {
                      const isExist = data.some(i => i.accoId === c.accoId);
                      if (!isExist) {
                        temp.accoId = undefined;
                        dispatch({
                          type: 'serviceconfig/updateAreaTableData',
                          payload: {
                            targetKey: 'accoId',
                            value: undefined,
                            areaConfigId: item.id,
                            key: c.key,
                          },
                        });
                      }
                    });
                  }
                  if (c.payWay === '1') {
                    dispatch({
                      type: 'serviceconfig/updateAreaTableData',
                      payload: {
                        targetKey: 'groupList',
                        value: [{ lsPkgId: c.plcyId, lsPkgName: c.payName }],
                        areaConfigId: item.id,
                        key: c.key,
                      },
                    });
                  } else {
                    this.getIsSupplyScope(
                      item.id,
                      c.kind === '2' ? ['2'] : insKinds,
                      item.id,
                      c.key
                    );
                    this.getGroupList(item.id, c.payWay, insKinds, item.id, c.key);
                  }
                  if (item.id === '1415662' && c.payWay === '2' && c.kind === '5') {
                    dispatch({
                      type: 'serviceconfig/updateAreaTableData',
                      payload: {
                        targetKey: 'isSecAccu',
                        value: true,
                        areaConfigId: item.id,
                        key: c.key,
                      },
                    });
                    this.getSecAccoList(item.id, c.payWay, insKinds, item.id, c.key);
                  }
                });
              }
            });
          }
          dispatch({
            type: 'serviceconfig/updateModelData',
            payload: { ...response.data },
          });
        }
      });
    }
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: {
        insMergekindList: [], // 五险合一险种列表
        insNotMergekindList: [], // 五险不合一险种列表
        payWayList: [], // 缴费方式列表
        accountList: [], // 缴费账户列表
        secAccuList: [], // 工伤二级户列表
        custId: null,
        custConfName: null,
        remark: null,
        areaConfigId: 0, // 地区配置id
        tableId: 0, // 表格行标识
        detList: [],
        custInfo: undefined,
      },
    });
  }

  // 添加服务配置
  addAreaConfig = () => {
    const {
      dispatch,
      detList,
      areaConfigId,
      tableId,
      serviceconfig: { insMergekindList, custId },
    } = this.props;
    const newData = {
      id: areaConfigId,
      areaId: undefined,
      insSetFlag: 1,
      confDetList: [
        {
          id: areaConfigId,
          key: tableId,
          kind: undefined, // 险种
          payWay: undefined, // 缴费方式
          accoId: undefined, // 缴费账户
          plcyId: undefined, // 政策组合
          kindList: insMergekindList, // 险种列表
          accountList: [], // 缴费账户列表
          groupList: [], // 政策组合列表
          isSecAccu: false, // 是否是工伤二级户
          secAccuList: [], // 工伤二级户列表
        },
      ],
    };
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: {
        detList: [...detList, newData],
        areaConfigId: areaConfigId + 1,
        tableId: tableId + 1,
      },
    });
    if (!custId) {
      return message.warning('建议优先选择一客户！');
    }
  };

  // 删除服务配置
  deleteAreaConfig = id => {
    const { dispatch, detList } = this.props;
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: { detList: detList.filter(item => item.id !== id) },
    });
  };

  // 添加险种列表
  addInsList = id => {
    const {
      dispatch,
      detList,
      tableId,
      serviceconfig: { insMergekindList, insNotMergekindList },
    } = this.props;
    detList.map(item => {
      if (item.id === id) {
        item.confDetList.push({
          id: item.id,
          key: tableId,
          kind: undefined, // 险种
          payWay: undefined, // 缴费方式
          accoId: undefined, // 缴费账户
          plcyId: undefined, // 政策组合
          kindList: item.insSetFlag === 1 ? insMergekindList : insNotMergekindList, // 险种列表
          accountList: [], // 缴费账户列表
          groupList: [], // 政策组合列表
          isSecAccu: false, // 是否是工伤二级户
          secAccuList: [], // 工伤二级户列表
          isSupplyScope: true,
        });
      }
    });
    const newDetList = JSON.parse(JSON.stringify(detList));
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: { detList: newDetList, tableId: tableId + 1 },
    });
  };

  // 删除险种列表
  delInsList = (id, key) => {
    const { dispatch, detList } = this.props;
    detList.map(item => {
      const temp = item;
      if (item.id === id) {
        temp.confDetList = item.confDetList.filter(c => c.key !== key);
      }
    });
    const newDetList = JSON.parse(JSON.stringify(detList));
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: { detList: newDetList },
    });
  };

  // 选择客户
  selectCustomer = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'serviceconfig/updateModelData',
      payload: { custId: value.key },
    });
  };

  // 选择执行地
  selectArea = (value, id) => {
    const areaId = value.key;
    const { dispatch, detList, form } = this.props;
    // 获取五险合不合一
    dispatch({
      type: 'serviceconfig/fetchGetInsUnifyFlag',
      payload: { areaId, id },
    });
    detList.forEach(item => {
      if (item.id === id && item.confDetList && item.confDetList.length) {
        item.confDetList.forEach(c => {
          form.resetFields([
            `detList[${id}][confDetList[${c.key}][kind]]`,
            `detList[${id}][confDetList[${c.key}][accoId]]`,
            `detList[${id}][confDetList[${c.key}][plcyId]]`,
          ]);
          dispatch({
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'kind', value: undefined, areaConfigId: id, key: c.key },
          });
          dispatch({
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'accoId', value: undefined, areaConfigId: id, key: c.key },
          });
          dispatch({
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'plcyId', value: undefined, areaConfigId: id, key: c.key },
          });
          dispatch({
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'isSecAccu', value: false, areaConfigId: id, key: c.key },
          });
          dispatch({
            // 缴费账户列表重置
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'accountList', value: [], areaConfigId: id, key: c.key },
          });
          dispatch({
            // 政策组合列表重置
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'groupList', value: [], areaConfigId: id, key: c.key },
          });
          dispatch({
            type: 'serviceconfig/updateAreaTableData',
            payload: { targetKey: 'secAccuList', value: [], areaConfigId: id, key: c.key },
          });
        });
      }
    });
  };

  // 选择险种
  selectKind = (value, areaConfigId, key) => {
    const { dispatch, detList, form } = this.props;
    // 更新当前表格数据
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'kind', value, areaConfigId, key },
    });
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'accoId', value: undefined, areaConfigId, key },
    });
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'plcyId', value: undefined, areaConfigId, key },
    });
    form.resetFields([
      `detList[${areaConfigId}][confDetList[${key}][accoId]]`,
      `detList[${areaConfigId}][confDetList[${key}][plcyId]]`,
    ]);
    // 判断是否是工伤二级户
    let isSecAccu = false;
    const isAccu = value === '2'; //  是否公积金
    let currentAreaId = null;
    let insKinds = [];
    let payWay = null;
    if (value !== '2' && value !== '1') {
      insKinds.push(value);
    } else if (value !== '2' && value === '1') {
      insKinds = ['3', '4', '5', '6', '7'];
    }
    detList.forEach(item => {
      if (item.id === areaConfigId) {
        currentAreaId = item.areaId && (item.areaId.key || item.areaId);
        item.confDetList.forEach(c => {
          const temp = c;
          if (c.key === key) {
            temp.kind = value;
            // eslint-disable-next-line prefer-destructuring
            payWay = c.payWay;
            isSecAccu = currentAreaId === '1415662' && c.payWay === '2' && value === '5';
          }
        });
      }
    });
    if (payWay) {
      // 存在缴费方式
      if (value === '5') {
        // 工伤二级户
        if (isSecAccu && insKinds.length && payWay === '2') {
          // 获取工伤二级户
          this.getSecAccoList(currentAreaId, payWay, insKinds, areaConfigId, key);
        }
      } else {
        // 有缴费方式获取政策组合
        if (currentAreaId && (insKinds.length || (isAccu && !insKinds.length))) {
          this.getAcountList(currentAreaId, payWay, insKinds, areaConfigId, key);
        }
        if (currentAreaId && payWay === '2' && (insKinds.length || (isAccu && !insKinds.length))) {
          this.getIsSupplyScope(currentAreaId, value === '2' ? ['2'] : insKinds, areaConfigId, key);
          this.getGroupList(currentAreaId, value, insKinds, areaConfigId, key);
        }
      }
    }
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: {
        targetKey: 'isSecAccu',
        value: isSecAccu,
        areaConfigId,
        key,
      },
    });
  };

  // 选择缴费方式
  selectPayWay = (value, areaConfigId, key) => {
    const { dispatch, detList, form } = this.props;
    // 更新当前表格数据
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'isSupplyScope', value: true, areaConfigId, key },
    });
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'payWay', value, areaConfigId, key },
    });
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'accoId', value: undefined, areaConfigId, key },
    });
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'plcyId', value: undefined, areaConfigId, key },
    });
    if (value === '1') {
      // 二级户取反
      dispatch({
        type: 'serviceconfig/updateAreaTableData',
        payload: { targetKey: 'isSecAccu', value: false, areaConfigId, key },
      });
      dispatch({
        type: 'serviceconfig/updateAreaTableData',
        payload: { targetKey: 'secAccuList', value: [], areaConfigId, key },
      });
    }
    dispatch({
      // 缴费账户列表重置
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'accountList', value: [], areaConfigId, key },
    });
    dispatch({
      // 政策组合列表重置
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'groupList', value: [], areaConfigId, key },
    });
    form.resetFields([
      `detList[${areaConfigId}][confDetList[${key}][accoId]]`,
      `detList[${areaConfigId}][confDetList[${key}][plcyId]]`,
    ]);
    let currentAreaId = null;
    let insKinds = [];
    let isAccu = false; //  是否公积金
    let isSecAccu = false; // 是否是工伤二级户
    detList.forEach(item => {
      if (item.id === areaConfigId) {
        currentAreaId = item.areaId && (item.areaId.key || item.areaId);
        item.confDetList.forEach(c => {
          if (c.key === key && c.kind) {
            if (c.kind !== '2' && c.kind !== '1') {
              insKinds.push(c.kind);
            } else if (c.kind !== '2' && c.kind === '1') {
              insKinds = ['3', '4', '5', '6', '7'];
            }
            isAccu = c.kind === '2';
            isSecAccu = value === '2' && currentAreaId === '1415662' && c.kind === '5';
          }
        });
      }
    });
    if (currentAreaId && ((!isSecAccu && insKinds.length) || (isAccu && !insKinds.length))) {
      this.getAcountList(currentAreaId, value, insKinds, areaConfigId, key);
    }
    if (value === '2') {
      // 选择大库：获取政策组合列表
      if (currentAreaId && (insKinds.length || (isAccu && !insKinds.length))) {
        this.getIsSupplyScope(currentAreaId, ['2'], areaConfigId, key);
        this.getGroupList(currentAreaId, value, insKinds, areaConfigId, key);
      }
      // 工伤二级户
      if (currentAreaId && isSecAccu && insKinds.length) {
        dispatch({
          type: 'serviceconfig/updateAreaTableData',
          payload: {
            targetKey: 'isSecAccu',
            value: isSecAccu,
            areaConfigId,
            key,
          },
        });
        this.getSecAccoList(currentAreaId, value, insKinds, areaConfigId, key);
      }
    }
  };

  // 选择缴费账户
  selectAccount = (value, options, areaConfigId, key) => {
    const { dispatch, form } = this.props;
    const plcyInfo = options && options.props && options.props.fsOptions;
    form.setFieldsValue({
      [`detList[${areaConfigId}][confDetList[${key}][plcyId]]`]: undefined,
    });
    dispatch({
      // 设置政策重置
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'plcyId', value: undefined, areaConfigId, key },
    });
    dispatch({
      // 政策组合列表
      type: 'serviceconfig/updateAreaTableData',
      payload: {
        targetKey: 'groupList',
        value: [],
        areaConfigId,
        key,
      },
    });
    if (plcyInfo && plcyInfo.suppPkgs) {
      // 大库：带出政策组合
      plcyInfo.suppPkgs.map(item => {
        const temp = item;
        temp.lsPkgId = item.plcyId;
        temp.lsPkgName = item.plcyName;
      });
      dispatch({
        // 政策组合列表
        type: 'serviceconfig/updateAreaTableData',
        payload: {
          targetKey: 'groupList',
          value: plcyInfo.suppPkgs,
          areaConfigId,
          key,
        },
      });
    }
    if (plcyInfo && plcyInfo.plcyId) {
      // 带出政策组合
      dispatch({
        // 政策组合列表
        type: 'serviceconfig/updateAreaTableData',
        payload: {
          targetKey: 'groupList',
          value: [{ lsPkgId: plcyInfo.plcyId, lsPkgName: plcyInfo.plcyName }],
          areaConfigId,
          key,
        },
      });
      dispatch({
        // 设置政策组合选中
        type: 'serviceconfig/updateAreaTableData',
        payload: { targetKey: 'plcyId', value: plcyInfo.plcyId, areaConfigId, key },
      });
      form.setFieldsValue({
        [`detList[${areaConfigId}][confDetList[${key}][plcyId]]`]: plcyInfo.plcyId,
      });
    }
    // 更新当前表格数据
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'accoId', value, areaConfigId, key },
    });
  };

  // 选择工伤二级户
  selectSecAcco = (value, options, areaConfigId, key) => {
    const { dispatch } = this.props;
    if (value.length === 1) {
      return message.warning(`请选择"${options[0].accoName}"的二级户`);
    }
    // 更新当前表格数据
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'accoId', value: value[value.length - 1], areaConfigId, key },
    });
  };

  // 选择政策组合
  selectGroup = (value, areaConfigId, key) => {
    const { dispatch } = this.props;
    // 更新当前表格数据
    dispatch({
      type: 'serviceconfig/updateAreaTableData',
      payload: { targetKey: 'plcyId', value, areaConfigId, key },
    });
  };

  // 获取在不在供应商业务范围内
  getIsSupplyScope = (areaId, insKinds, areaConfigId, key) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'serviceconfig/fetchIsSupplyScope',
      payload: {
        areaId,
        insKinds,
        areaConfigId,
        key,
      },
    });
  };

  // 获取缴费账户列表
  getAcountList = (areaId, payWay, insKinds, areaConfigId, key, callback) => {
    const {
      dispatch,
      serviceconfig: { custId },
    } = this.props;
    if (!custId) {
      return message.warning('请先选择客户！');
    }
    if (!areaId) {
      return message.warning('请先选择地区！');
    }
    dispatch({
      type: 'serviceconfig/fetchAcountList',
      payload: {
        custId,
        areaId,
        insKinds,
        payWay,
        areaConfigId,
        key,
      },
    }).then(data => {
      if (data && data.length && callback) {
        callback(data);
      }
    });
  };

  // 获取政策组合列表
  getGroupList = (areaId, payWay, insKinds, areaConfigId, key) => {
    const {
      dispatch,
      serviceconfig: { custId },
    } = this.props;
    if (!custId) {
      return message.warning('请先选择客户！');
    }
    if (!areaId) {
      return message.warning('请先选择地区！');
    }
    dispatch({
      type: 'serviceconfig/fetchGroupList',
      payload: {
        custId,
        areaId,
        insKinds,
        payWay,
        pdId: insKinds.length ? 'PDINF_0000000001' : 'PDINF_0000000002',
        areaConfigId,
        key,
      },
    });
  };

  // 获取工伤二级户列表
  getSecAccoList = (areaId, payWay, insKinds, areaConfigId, key) => {
    const {
      dispatch,
      serviceconfig: { custId },
    } = this.props;
    if (!custId) {
      return message.warning('请先选择客户！');
    }
    if (!areaId) {
      return message.warning('请先选择地区！');
    }
    if (custId && areaId && payWay && insKinds.length) {
      dispatch({
        type: 'serviceconfig/fetchSecAccoList',
        payload: {
          custId,
          areaId,
          insKinds,
          payWay,
          areaConfigId,
          key,
        },
      });
    }
  };

  // 提交数据
  submitData = () => {
    const { dispatch, form } = this.props;
    const { custConfId } = this.state;
    form.validateFields((err, values) => {
      const temp = values;
      if (!err) {
        if (values.detList && values.detList.length) {
          const detList = [];
          temp.detList = values.detList.filter(item => item);
          values.detList.forEach(item => {
            detList.push({ areaId: item.areaId && item.areaId.key });
          });
          if (isRepeat(detList, 'areaId')) {
            message.warning('所选地区名称重复，请重新选择！');
            return;
          }
          for (let index = 0; index < values.detList.length; index += 1) {
            const item = values.detList[index];
            if (item.confDetList && item.confDetList.length) {
              if (Array.isArray(item.confDetList)) {
                item.confDetList = item.confDetList.filter(c => c);
              } else {
                // eslint-disable-next-line compat/compat
                item.confDetList = Object.values(item.confDetList);
              }
              if (isRepeat(item.confDetList, 'kind')) {
                message.warning(
                  `所选'${item.areaId && item.areaId.label}'地区下险种重复，请重新选择！`
                );
                return;
              }
            }
          }
          dispatch({
            type: 'serviceconfig/submit',
            payload: { values, custConfId },
          });
        } else {
          message.warning('请增加地区服务配置！');
        }
      }
    });
  };

  render() {
    const {
      detList,
      form: { getFieldDecorator },
      submitLoading,
      serviceconfig,
    } = this.props;
    const { isdisbaled } = this.state;
    const columns = [
      {
        title: '险种',
        dataIndex: 'kind',
        key: 'kind',
        width: '20%',
        onHeaderCell: () => ({ style: { textaAlign: 'center' } }),
        render: (text, record) => (
          <FormItem>
            {getFieldDecorator(`detList[${record.id}][confDetList[${record.key}][kind]]`, {
              rules: [{ required: true, message: '请选择' }],
              initialValue: record.kind,
            })(
              <Select
                placeholder="请选择"
                optionFilterProp="children"
                notFoundContent="暂无数据"
                onSelect={value => this.selectKind(value, record.id, record.key)}
              >
                {record.kindList &&
                  record.kindList.map(options => (
                    <Option value={options.itemCode} key={options.itemCode}>
                      {options.itemName}
                    </Option>
                  ))}
              </Select>
            )}
          </FormItem>
        ),
      },
      {
        title: '缴费方式',
        dataIndex: 'payway',
        key: 'payway',
        width: '20%',
        onHeaderCell: () => ({ style: { textaAlign: 'center' } }),
        render: (text, record) => (
          <FormItem>
            {getFieldDecorator(`detList[${record.id}][confDetList[${record.key}][payWay]]`, {
              rules: [{ required: true, message: '请选择' }],
              initialValue: record.payWay,
            })(
              <DictCode
                placeholder="请选择"
                dictType="PAY_FEES_WAY"
                onSelect={value => this.selectPayWay(value, record.id, record.key)}
              />
            )}
          </FormItem>
        ),
      },
      {
        title: '缴费账户',
        dataIndex: 'accoId',
        key: 'accoId',
        onHeaderCell: () => ({ style: { textaAlign: 'center' } }),
        render: (text, record) => (
          <FormItem>
            {getFieldDecorator(`detList[${record.id}][confDetList[${record.key}][accoId]]`, {
              rules: [{ required: record.payWay === '1', message: '请选择' }],
              initialValue: record.accoId || undefined,
            })(
              record.isSecAccu ? (
                <Cascader
                  placeholder="请输入关键字检索"
                  options={record.secAccuList}
                  showSearch
                  notFoundContent="暂无工伤二级户"
                  onChange={(value, options) =>
                    this.selectSecAcco(value, options, record.id, record.key)
                  }
                  changeOnSelect
                />
              ) : (
                <Select
                  placeholder="请选择"
                  optionFilterProp="children"
                  notFoundContent="暂无数据"
                  onSelect={(value, options) =>
                    this.selectAccount(value, options, record.id, record.key)
                  }
                  disabled={record.payWay === '2' && !record.isSupplyScope}
                >
                  {record.accountList &&
                    record.accountList.map(options => (
                      // <Option value={options.accoId} key={options.accoId} options={options}>
                      //   {options.accoName}
                      // </Option>
                      <Option value={options.accoId} key={options.accoId} fsOptions={options}>
                        {options.accoName}
                      </Option>
                    ))}
                </Select>
              )
            )}
          </FormItem>
        ),
      },
      {
        title: '政策组合',
        dataIndex: 'payAcco',
        key: 'payAcco',
        width: '20%',
        onHeaderCell: () => ({ style: { textaAlign: 'center' } }),
        render: (text, record) => (
          <FormItem>
            {getFieldDecorator(`detList[${record.id}][confDetList[${record.key}][plcyId]]`, {
              rules: [{ required: record.payWay === '2', message: '请选择' }],
              initialValue: record.plcyId,
            })(
              <Select
                placeholder="请选择"
                notFoundContent="暂无数据"
                onSelect={value => this.selectGroup(value, record.id, record.key)}
                disabled={record.payWay === '1'}
              >
                {record.groupList &&
                  record.groupList.map(item => (
                    <Option value={item.lsPkgId} key={item.lsPkgId}>
                      {item.lsPkgName}
                    </Option>
                  ))}
              </Select>
            )}
          </FormItem>
        ),
      },
      {
        title: '操作',
        key: 'action',
        width: '10%',
        onHeaderCell: () => ({ style: { textaAlign: 'center' } }),
        render: (text, record, index) =>
          index > 0 ? (
            <span style={{ position: 'relative', top: '-12px' }}>
              <Popconfirm
                title="确定要删除此行？"
                onConfirm={() => this.delInsList(record.id, record.key)}
              >
                <a>删除</a>
              </Popconfirm>
            </span>
          ) : null,
      },
    ];
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={submitLoading || false}>
          <Form layout="horizontal">
            <Card bordered={false}>
              <Row>
                <Col span={8}>
                  <FormItem label="客户名称" labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
                    {getFieldDecorator('custId', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: serviceconfig.custInfo || undefined,
                    })(
                      <Customer
                        getData={this.selectCustomer}
                        labelInValue
                        disabled={isdisbaled}
                        isShowSupp
                      />
                    )}
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem label="配置名称" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
                    {getFieldDecorator('custConfName', {
                      rules: [{ required: true, message: '请输入', max: 100 }],
                      initialValue: serviceconfig.custConfName || undefined,
                    })(<Input maxLength={100} placeholder="请输入" />)}
                  </FormItem>
                </Col>
                <Col span={8}>
                  <FormItem label="备注" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
                    {getFieldDecorator('remark', {
                      rules: [{ required: false, message: '请输入', max: 200 }],
                      initialValue: serviceconfig.remark || undefined,
                    })(<TextArea maxLength={200} rows={1} placeholder="请输入" />)}
                  </FormItem>
                </Col>
              </Row>
            </Card>
            <Card style={{ marginTop: 20 }}>
              <Button
                style={{ width: '100%', marginTop: 16, marginBottom: 20 }}
                type="dashed"
                onClick={this.addAreaConfig}
                icon={<PlusOutlined />}
              >
                增加地区配置
              </Button>
            </Card>
            {detList.map(item => (
              <Card
                key={item.id}
                title={
                  <Row
                    style={{ width: '100%', display: 'block', paddingTop: 8 }}
                    className={styles.serConStyle}
                  >
                    <Col sm={24} md={{ span: 16 }} lg={{ span: 10 }} xl={{ span: 10 }}>
                      <FormItem
                        labelCol={{ md: { span: 8 } }}
                        wrapperCol={{ md: { span: 6 } }}
                        label="选择地区"
                        style={{ marginBottom: 0, display: 'inline-block' }}
                      >
                        {getFieldDecorator(`detList[${item.id}][areaId]`, {
                          rules: [{ required: true, message: '请选择' }],
                          initialValue: item.areaId || undefined,
                        })(
                          <Area
                            placeholder="请输入关键字检索"
                            style={{ width: '200px' }}
                            labelInValue
                            onChange={value => this.selectArea(value, item.id)}
                          />
                        )}
                      </FormItem>
                      {item.insSetFlag ? (
                        <span
                          style={{
                            fontSize: 12,
                            color: '#aaa',
                            lineHeight: '34px',
                            marginLeft: '-30px',
                          }}
                        >
                          {item.insSetFlag === 1 ? '（五险合一）' : '（五险不合一）'}
                        </span>
                      ) : null}
                    </Col>
                    <div style={{ float: 'right', lineHeight: '39px' }}>
                      <Popconfirm
                        title="确定要删除此地区配置？"
                        onConfirm={() => this.deleteAreaConfig(item.id)}
                      >
                        <a>删除</a>
                      </Popconfirm>
                    </div>
                  </Row>
                }
                style={{ marginBottom: 24 }}
                bordered={false}
              >
                <Table
                  pagination={false}
                  dataSource={item.confDetList}
                  rowKey={record => `${record.id}-${record.key}`}
                  columns={columns}
                  className={styles.rowPadding}
                />
                <Button
                  style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
                  type="dashed"
                  onClick={() => this.addInsList(item.id)}
                  icon={<PlusOutlined />}
                >
                  新增
                </Button>
              </Card>
            ))}

            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={() => router.goBack()} style={{ marginRight: 10 }}>
                取消
              </Button>
              <Button type="primary" onClick={this.submitData} loading={submitLoading}>
                保存
              </Button>
            </FooterToolbar>
          </Form>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default ServiceConfig;
